<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
      .aui-bar-nav{background-color: #fff;position: relative;}
        .aui-bar-nav .aui-btn .aui-iconfont,.aui-bar-nav .aui-title{color: #333}
      body{margin: 0}
      img{border: none}
      section{width: 100%;box-sizing: border-box;padding: 20px 0px;}
      h1,h2,h3,h4,h5,h6{font-weight: normal;;}
     .rw{padding: 0 15px;box-sizing:border-box;width: 100%;padding-bottom:13px;border-bottom: 1px solid #F0F0F0;margin-bottom: 15px;}
     .rw .img{width: 58px;height: 58px;box-sizing: border-box;border-radius: 50%;display: inline-block;overflow: hidden;margin-right: 14px;float: left;}
       .rw .img img{width: 100%;height: 100%}
      .rw .te{float: left;}
       .rw .te h4{margin-top: 9px;color: #333;font-size: 14px;margin-bottom: 14px;line-height: 14px;}
     .rw .te p{color: #999;font-size: 12px;line-height: 13px;background-image: url(../../image/dianhau.png);background-repeat: no-repeat;background-position: left center;;background-size:15px  10px;padding-left: 20px;}

    .gzpj{width: 100%;box-sizing: border-box;padding: 0 15px;}
    .gzpj .ti{margin-top: 10px;margin-bottom:20px;}
    .gzpj .ti *{display: inline-block;}
    .gzpj .ti span{display:inline-block;background-color: #fc8622;width: 3px;height: 12px;margin-right: 6px;    vertical-align: middle}
    .gzpj .ti h4{color: #333;line-height: 13px;font-size: 14px;margin:0;margin-bottom:10px;}
    .gzpj  .con{width: 100%;box-sizing: border-box;padding-bottom: 33px;}
    .gzpj .con textarea{display: block;box-sizing: border-box;;height: 150px;padding: 4px; font-size: 13px}
    /* starWrapper */
.starWrapper{padding:5px;width:110px;height:24px;}
.starWrapper img{cursor:pointer;float:left;margin:0 2px 0 0;display:inline;}
    .gzpj .con .col{ width: 100%;margin-bottom: 20px;}
    .gzpj .con .col span{color:#666;font-size: 13px;text-align: center;margin-bottom: 8px;display: block;}
    .gzpj .con .col select{font-size: 14px;text-align: center;color: #fff;background-color: #a6defe;border: none;width: 100%;padding-left: 49%;display: block;border-radius: 4px}
    .gzpj .con .col select option{text-align: center;}
      .gzpj .con .col p{display: inline-block;vertical-align: middle;}
      .gzpj .con .col p img{width: 14px;display: inline-block;}
  .submit{width: 100%;padding: 0 15px;box-sizing: border-box;margin-bottom: 20px;}
        button{ border: 0;background-color: transparent;outline: none;display: block;width: 100%;margin: 0 auto;;height: 40px;background-color: #fc8622;text-align: center;line-height: 40px;color:#fff;font-size:15px;}
      .jjtc{position: fixed;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.25);z-index: 1000000;display: none;}
      .jjtc .box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;width:250px;height: 225px;border-radius: 4px;box-sizing: border-box;;overflow:hidden}
      .jjtc .top{;width: 100%;height: 40px;background-image: -moz-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%); background-image: -ms-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);}
      .jjtc .top h4{text-align: center;color: #fff;font-size: 12px;line-height: 40px;}
      .jjtc .box .close{position: absolute;top: 17px;right: 10px;width: 7px;height: 7px;cursor: pointer;}
      .jjtc .box .close img{width: 100%;display: block;height: 100%}
      .jjtc .box .tetx{width: 100%;height: 120px;box-sizing: border-box;padding: 25px 24px;}
      .jjtc .box .tetx .col{width:96px;height: 30px;box-sizing: border-box;border-radius: 2px;text-align: center;;color: #999;font-size: 12px;line-height: 30px;border: 1px solid #e7e7e7;float: left;margin-bottom: 10px;}
      .jjtc .box .tetx .col:nth-child(2n){float: right;}
      .jjtc .box button{display: block;margin: 0 auto;width:203px;height: 40px;box-sizing: border-box;color: #fff;font-size: 13px;text-align: center;line-height: 40px;background-color: #fc8622;border-radius: 2px}
      .checked{color: #fc8622!important;border-color: #fc8622!important}
      .clearfix{clear: both;}

      </style>
  </head>
  <body>
<section  id="pjjs" >
  <div class="rw"   >
    <div>
    <div class="img">
      <img :src="img" :alt="id">
    </div>
    <div class="te">
      <h4>{{name}}</h4>
     <p>{{phone}}</p>
    </div>
      <div class="clearfix"></div>
      </div>
  </div>
<div class="gzpj" >
  <div class="ti" style="margin-bottom:5px;">
    <span></span>
    <h4>雇主评价</h4>
  </div>
  <div class="con" >
<textarea name="" id="pja" cols="30" rows="10" placeholder="写下对这位师傅的评价吧！"></textarea>
  </div>
</div>
<div class="gzpj" >
  <div class="ti">
    <span></span>
    <h4>评价打分</h4>
  </div>
  <div class="con" >
    <div class="col">
      <span>准时率</span>
      <select id="zhunshi">
        <option value="2">1</option>
        <option value="4">2</option>
        <option value="6">3</option>
        <option value="8">4</option>
        <option value="10">5</option>
      </select>
    <!-- <p class="starWrapper" onmouseover="rate(this,event)">
    	<img src="../../image/star.svg" onclick="zhunshi(1)">
    	<img src="../../image/star.svg" onclick="zhunshi(2)" >
    	<img src="../../image/star.svg"  onclick="zhunshi(3)">
    	<img src="../../image/star.svg" onclick="zhunshi(4)" >
    	<img src="../../image/star.svg" onclick="zhunshi(5)" >
    </p> -->
  </div>
  <div class="col" >
    <span>完成质量</span>
    <select id="zhiliang">
      <option value="2">1</option>
      <option value="4">2</option>
      <option value="6">3</option>
      <option value="8">4</option>
      <option value="10">5</option>
    </select>
  <!-- <p class="starWrapper" onmouseover="rate(this,event)">
    <img src="../../image/star.svg" onclick="zhiliang(1)">
    <img src="../../image/star.svg" onclick="zhiliang(2)">
    <img src="../../image/star.svg" onclick="zhiliang(3)">
    <img src="../../image/star.svg" onclick="zhiliang(4)">
    <img src="../../image/star.svg" onclick="zhiliang(5)">
  </p> -->
</div>
<div class="col">
  <span>服务态度</span>
  <select id="taidu">
    <option value="2">1</option>
    <option value="4">2</option>
    <option value="6">3</option>
    <option value="8">4</option>
    <option value="10">5</option>
  </select>
<!-- <p class="starWrapper" onmouseover="rate(this,event)">
  <img src="../../image/star.svg" onclick="taidu(1)">
  <img src="../../image/star.svg" onclick="taidu(2)">
  <img src="../../image/star.svg" onclick="taidu(3)">
  <img src="../../image/star.svg" onclick="taidu(4)">
  <img src="../../image/star.svg" onclick="taidu(5)">
</p> -->
</div>

  </div>
</div>

<div class="submit">
<button id="canjia" type="button" @click="tijiao();" tapmode>提交评价</button>
</div>
</section>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
      <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">

      apiready = function(){
           id=api.pageParam.id
           uid=api.pageParam.uid
          console.log(id);
          console.log(uid);
          //console.log(img)
        pingjiaa = new Vue({
                    el: '#pjjs',
                    data: {
                    img:"",
                    name:"",
                    id:1 ,
                    phone:"1555556668",

                    },
      })
      ajax();
      //  api.pageParam.name
          api.parseTapmode();
          var header = $api.byId('aui-header');
          $api.fixStatusBar(header);
      };
      var jishourw,id,uid,pingjiaa;
      var limt=0;
      var td=0;
      var zl=0;
      var zs = 0;

      // 星星
      function rate(obj,oEvent){

    	var imgSrc = '../../image/star.svg';
    	var imgSrc_2 = '../../image/star-hover.svg';

    	if(obj.rateFlag) return;
    	var e = oEvent || window.event;
    	var target = e.target || e.srcElement;
    	var imgArray = obj.getElementsByTagName("img");
    	for(var i=0;i<imgArray.length;i++){
    		imgArray[i]._num = i;
        console.log(i);
    		imgArray[i].onclick=function(){
    			if(obj.rateFlag)

    			obj.rateFlag=true;
    		};
    	}

      if(target.tagName=="IMG"){
		for(var j=0;j<imgArray.length;j++){
			if(j<=target._num){
				imgArray[j].src=imgSrc_2;
			}else{
				imgArray[j].src=imgSrc;
			}
		}
	}

    }

      function canjia(){
        var lxjs=$api.byId('lxjs');
        $api.css(lxjs, 'display:block');
      }
      //接受邀请
function lxjsjoin(){
var canjia=$api.byId('canjia');
  $api.text(canjia, '已参加项目');
  $api.css(canjia, 'background-color: #999');
var lxjs=$api.byId('lxjs');
$api.css(lxjs, 'display:none');
}
//点关闭
function lxjsclose() {
  var lxjs=$api.byId('lxjs');
  $api.css(lxjs, 'display:none');
}


function clos(){
  $api.css($api.byId("jjtc"), 'display:none');
}


function ajax(){
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?s=jishou&c=home&m=ping&uid='+uid,
      method: 'get',
  },function(ret, err){
      if (ret) {
        pingjiaa.name=ret.status.name;
        pingjiaa.img=ret.status.img;
        pingjiaa.phone=ret.status.phone;
        //  xw_ajax();
      } else {
          console.log( JSON.stringify( err ) );
      }
  });
}


function tijiao(){
td =  $api.val($api.byId('taidu'));
zl = $api.val($api.byId('zhiliang'));
zs =  $api.val($api.byId('zhunshi'));
api.ajax({
    url: $api.getStorage("backapi")+'/index.php?s=xiangmu&c=home&m=pingjia',
    method: 'post',
    data: {
        values: {
            uid: uid,
            xid:id,
            td:td,
            zl:zl,
            zs:zs,
            pingjia: $api.val($api.byId("pja"))
        }
    }
},function(ret, err){
    if (ret) {
        if(ret.status){
          api.toast({
              msg: '评价成功',
              duration: 2000,
              location: 'bottom'
          });

        }
    } else {
        console.log( JSON.stringify( err ) );
    }
});

}

  </script>
  </html>
